<template>
  <div class="_staffDataCount">
    <!-- <van-cell title="查询日期：" :value="date" :readonly="true" />
    <van-calendar v-model="calendarShow" @confirm="onConfirm" :min-date="minDate" /> -->
    <div class="staffMsgCon van-hairline--bottom">
      <div>店员姓名：{{staffInfo?staffInfo.Name:''}}</div>
    </div>
    <div class="countCon">
      <van-row type="flex">
        <van-col class="countTitle">今天访问量：</van-col>
        <van-col>
          <div class="countNum2">{{count.readToday}}</div>
        </van-col>
        <van-col class="countTitle">今天裂变数：</van-col>
        <van-col>
          <div class="countNum">{{count.fissionToday}}</div>
        </van-col>
        <van-col class="countTitle">累计访问量：</van-col>
        <van-col>
          <div class="countNum2">{{count.readTotal}}</div>
        </van-col>
        <van-col class="countTitle">累计裂变数：</van-col>
        <van-col>
          <div class="countNum">{{count.fissionTotal}}</div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { Cell, Calendar, Col, Row, Dialog } from "vant";
import { formatDate } from "@/js/utils";
import { mapActions } from "vuex";
export default {
  components: {
    [Cell.name]: Cell,
    [Calendar.name]: Calendar,
    [Col.name]: Col,
    [Row.name]: Row
  },
  data() {
    return {
      calendarShow: false,
      date: "",
      minDate: new Date("2020/7/1"),
      count: {
        fissionToday: 0,
        fissionTotal: 0,
        readToday: 0,
        readTotal: 0
      }
    };
  },
  computed: {
    staffInfo() {
      return this.$store.state.staffInfo;
    }
  },
  created() {
    this.date = formatDate(new Date(), "yyyy-MM-dd");
  },
  mounted() {
    this.getData();
  },
  methods: {
    ...mapActions({ getStaffDataCount: "getStaffDataCount" }),
    onConfirm(value) {
      console.log(value);
      this.date = formatDate(value, "yyyy-MM-dd");
      this.calendarShow = false;
    },
    getData() {
      this.getStaffDataCount({
        openid: this.$store.state.userId
      })
        .then(res => {
          console.log(res);
          if (res.code == "000000") {
            this.count = res.data;
          } else {
            Dialog.alert({ message: "获取数据失败" });
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="scss">
._staffDataCount {
  height: 100vh;
  background-color: #eee;
  box-sizing: border-box;
  .staffMsgCon {
    background-color: white;
    padding: 12px 32px;
    box-sizing: border-box;
  }
  .countCon {
    padding: 24px;
    background-color: white;
    .van-row {
      flex-wrap: wrap;
      box-sizing: border-box;
    }
    .van-col {
      width: 50%;
      box-sizing: border-box;
      padding: 8px;
    }
    .countTitle {
      color: grey;
    }
    .countNum {
      color: $bg-secondary;
    }
    .countNum2 {
      color: black;
    }
  }
}
</style>